<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="设备监控—电热水器系统"></Header>

    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top">
          <div class="box-tit">
            <span>市民楼热水器</span>
          </div>
          <div class="box-con">
            <div class="con" style="display: flex; justify-content:center;">
              <ul class="list-m">
                <li class="list-p">
                  1层西热水器：12312
                </li>
                <li class="list-p">
                  2层西热水器：12312
                </li>
                <li class="list-p">
                  3层西热水器：12312
                </li>
                <li class="list-p">
                  4层西热水器：12312
                </li>
                <li class="list-p">
                  4层西热水器：12312
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div id="left-bottom">
          <div class="box-tit">
            <span>西辅楼热水器</span>
          </div>
          <div class="box-con">
            <div class="con" style="display: flex; justify-content:center;">
              <ul class="list-m">
                <li class="list-p">
                  1层西热水器：12312
                </li>
                <li class="list-p">
                  2层东热水器：12312
                </li>
                <li class="list-p">
                  2层西热水器：12312
                </li>
                <li class="list-p">
                  3层东热水器：12312
                </li>
                <li class="list-p">
                  3层西热水器：12312
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section class="screen-zhongjian">
        <div id="left-top">
          <div class="box-tit">
            <span>图例</span>
          </div>

          <div class="box-con">
            <div class="con">
              <div class="xxxx">
                <ul class="list-m">

                  <li class="list-p">
                    <label>正常运行
                      <img src="../../../assets/img/zhengchang.png" alt="" />
                    </label>
                    <span>故障报警
                      <img src="../../../assets/img/guzhang.png" alt="" />
                    </span>
                  </li>
                  <li class="list-p">
                    <label>停止运行
                      <img src="../../../assets/img/tingzhi.png" alt="" />
                    </label>
                    <span>通讯异常
                      <img src="../../../assets/img/jinggao.png" alt="" />
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <div id="left-xxx">
          <div class="box-tit">
            <span>主楼热水器</span>
          </div>

          <div class="box-con">
            <div class="con">
              <div class="xxxx">
                <ul class="list-m">
                  <li class="list-p">
                    <label>1层西热水器：12312</label>
                    <span>1层东热水器：12312</span>
                  </li>
                  <li class="list-p">
                    <label>2层西热水器：12312</label>
                    <span>2层东热水器：12312</span>
                  </li>
                  <li class="list-p">
                    <label>3层西热水器：12312</label>
                    <span>3层东热水器：12312</span>
                  </li>
                  <li class="list-p">
                    <label>4层西热水器：12312</label>
                    <span>4层东热水器：12312</span>
                  </li>
                  <li class="list-p">
                    <label>4层西热水器：12312</label>
                    <span>4层东热水器：12312</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="screen-right">
        <div id="left-top">
          <div class="box-tit">
            <span>变压器总路线</span>
          </div>
          <div class="box-con">
            <div class="con" style="display: flex; justify-content:center;">
              <ul class="list-m">
                <li class="list-p">
                  1层西热水器：12312
                </li>
                <li class="list-p">
                  2层西热水器：12312
                </li>
                <li class="list-p">
                  3层西热水器：12312
                </li>
                <li class="list-p">
                  4层西热水器：12312
                </li>
                <li class="list-p">
                  4层西热水器：12312
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div id="left-bottom">
          <div class="box-tit">
            <span>西辅楼热水器</span>
          </div>
          <div class="box-con">
            <div class="con" style="display: flex; justify-content:center;">
              <ul class="list-m">
                <li class="list-p">
                  1层西热水器：12312
                </li>
                <li class="list-p">
                  2层西热水器：12312
                </li>
                <li class="list-p">
                  3层西热水器：12312
                </li>
                <li class="list-p">
                  4层西热水器：12312
                </li>
                <li class="list-p">
                  4层西热水器：12312
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Dprs from "@/components/Dprs.vue";
import Ethree from "@/components/Ethree.vue";
import Efour from "@/components/Efour.vue";
import Eone from "@/components/Eone.vue";
import Etwo2 from "@/components/Etwo2.vue";
import dline from "@/components/dline.vue";
import dlines from "@/components/dlines.vue";
import Bowen from "../../../components/Bowen.vue";
import Bowen2 from "../../../components/Bowen2.vue";

import moment from "moment";

export default {
  components: {
    Header,
    dline,
    Dprs,
    Ethree,
    Efour,
    Eone,
    Etwo2,
    dlines,
    Bowen,
    Bowen2,
  },

  data() {
    return {
      filterData: {
        navTab: ["电", "水"],
      },
      currentSort: 0,
      totalEnergy: 1568, // 总能耗
      electricity: 2000, // 电
      water: 1000, // 水
      isRefresh: Date.now(),
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    active(index) {
      this.currentSort = index;
      this.isRefresh = Date.now();
    },
  },
};
</script>
<style lang="less" scoped>
.bg {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen-body {
  width: 100%;
  height: 100%;
  display: flex;

  align-items: center;
  .screen-left {
    height: 100%;
    width: 22.6%;
    margin-left: 300px;
    #left-top {
      height: 24%;
      min-height: 258px;
      margin-bottom: 230px;
      position: relative;
    }
    #left-center {
      height: 35%;
      min-height: 377px;
      position: relative;
      .box-con {
        height: 322px;
        .con {
          height: 306px;
        }
      }
    }
    #left-bottom {
      height: 29%;
      min-height: 323px;
      position: relative;
      z-index: 5;
      .box-con {
        height: 269px;
        .con {
          height: 253px;
        }
      }
    }
  }
  .screen-middle {
    height: 100%;
    width: 80%;
    margin-left: 0.6%;
    margin-right: 0.6%;

    #middle-top {
      width: 100%;
      height: 41.6%;
      position: relative;
      top: 15px;
      left: 0px;

      display: flex;
      flex-direction: column;
      .box-con {
        height: 269px;
        background: url("../../../assets/img/box_center.png") no-repeat;
        background-size: 100% 100%;
        .con {
          height: 253px;
          background: rgba(31, 48, 77, 0.2);
          display: flex;

          align-items: center;
          .sshn-box {
            width: 72%;
            height: inherit;
            position: relative;
            z-index: 666;
            .bjt {
              position: absolute;
              width: 90%;
              height: 100%;
              overflow: hidden;
              display: flex;
              align-items: center;
              background: url("../../../assets/img/bjt.png");
              background-size: 100% 100%;
              top: 15px;
              left: 8%;
              z-index: 1;
            }
          }

          .sshn_list_tree {
            width: 28%;
            height: inherit;
            .list-t {
              font-size: 14px;
              color: #567db6;
              height: 26px;
              display: flex;
              justify-content: flex-end;
              padding-right: 20px;
              align-items: flex-end;
            }
          }
        }
      }
    }
  }

  .box-tit {
    height: 40px;
    line-height: 29px;
    width: 100%;
    font-size: 14px;
    color: #b8f9ff;
    padding-left: 39px;
    background: url("../../../assets/img/box-top.png") no-repeat;
    box-sizing: border-box;
    display: flex;
    .tab {
      width: 100px;
      margin-left: 10px;

      .btn {
        background: #1d2a4f;
        color: #00beff;
        width: 34px;
        display: inline-block;
        height: 20px;
        border-radius: 3px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
      }
      .active {
        background: #567db6 !important;
        color: #fff !important;
      }
    }
  }
  .box-con {
    height: 211px;
    width: 100%;
    padding: 6px 0 6px 10px;
    box-sizing: border-box;
    background: url("../../../assets/img/box-bot.png") no-repeat;
    background-size: 100% 100%;
    .con {
      height: 197px;
      background: rgba(31, 48, 77, 0.2);

      .box-con-l {
        width: 50%;
      }
      .box-con-r {
        width: 50%;
      }
    }
    .hn_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          height: 33.333%;
          display: flex;

          align-items: center;
          .list-l {
            width: 17%;
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
          }
          // .list-c {
          // }
          .list-r {
            width: 52%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              height: 40px;
              span {
                color: #567db6;
                font-size: 25px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;

              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 50%;

                &:first-child small {
                  margin-left: 10px;
                  color: #00fbfc;
                }
                &:last-child small {
                  margin-left: 10px;
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .sshn_list_tree {
      width: 28%;
      height: inherit;
      ul {
        height: inherit;
        li {
          height: 64px;
          display: flex;

          align-items: center;
          width: 97%;
          background: rgba(31, 48, 77, 0.2);
          &:nth-child(2) {
            margin: 60px 0;
          }
          .list-c {
            padding-left: 21px;
            padding-top: 8px;
          }
          .list-r {
            width: 68%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              span {
                color: #567db6;
                font-size: 22px;
                display: inline-block;
                line-height: 40px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 43%;

                &:first-child small {
                  color: #00fbfc;
                }
                &:last-child small {
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .qx_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          &:first-child {
            height: 25px;
            .list-l {
              width: 23.5%;
              text-align: right;
              display: inline-block;
              color: #567db6;
              font-size: 16px;
            }
            .list-r {
              width: 45%;
              color: #567db6;
              font-size: 14px;
            }
          }
          &:last-child {
            height: 25px;
            font-size: 14px;
            color: #567db6;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          height: 71.333%;
          display: flex;

          align-items: center;

          .list-l {
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
            width: 50%;
            padding-right: 19px;
          }
          .list-r {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 53%;
            font-size: 49px;
            font-weight: 600;
            color: #567db6;
          }
        }
      }
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.list-m {
  display: flex;
  flex-direction: column;
}
label {
  display: inline-block;
  width: 50%;
  text-align: 0 !important;
  // line-height: 50px;
  color: #ffff;
  margin-left: 20px;
}
// #left-bottom .box-con .con {
//     padding-left: 93px;
// }

#middle-bottom {
  background: url("../../../assets/img/box-bot.png") no-repeat;
  background-size: 100% 100%;
  height: 536px;
}
#middle-bottom-center {
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  height: 536px;
  background: rgba(31, 48, 77, 0.2);
}
#middle-bottom-left {
  // height: 536px;
  // background: rgba(31, 48, 77, 0.2);

  // width: 720px;
  // width: 72%;
  height: inherit;
  position: relative;
}
#middle-bottom-right {
  //    width: 28%;
  height: inherit;
}
.zb {
  width: 400px;
  height: 250px;
  padding-left: 119px;
}

.screen-body {
  width: 100%;
  height: 100%;
  display: flex;

  align-items: center;
  .screen-zhongjian {
    height: 100%;
    width: 22.6%;
    margin-left: 50px;
    #left-top {
      height: 24%;
      min-height: 258px;
      margin-bottom: 10px;
      margin-top: 120px;
      position: relative;
    }
    #left-center {
      height: 35%;
      min-height: 377px;
      position: relative;
      .box-con {
        height: 322px;
        .con {
          height: 306px;
        }
      }
    }
    #left-bottom {
      height: 29%;
      min-height: 323px;
      position: relative;
      z-index: 5;
      .box-con {
        height: 269px;
        .con {
          height: 253px;
        }
      }
    }
  }
  .screen-middle {
    height: 100%;
    width: 80%;
    margin-left: 0.6%;
    margin-right: 0.6%;

    #middle-top {
      width: 100%;
      height: 41.6%;
      position: relative;
      top: 15px;
      left: 0px;

      display: flex;
      flex-direction: column;
      .box-con {
        height: 269px;
        background: url("../../../assets/img/box_center.png") no-repeat;
        background-size: 100% 100%;
        .con {
          height: 253px;
          background: rgba(31, 48, 77, 0.2);
          display: flex;

          align-items: center;
          .sshn-box {
            width: 72%;
            height: inherit;
            position: relative;
            z-index: 666;
            .bjt {
              position: absolute;
              width: 90%;
              height: 100%;
              overflow: hidden;
              display: flex;
              align-items: center;
              background: url("../../../assets/img/bjt.png");
              background-size: 100% 100%;
              top: 15px;
              left: 8%;
              z-index: 1;
            }
          }

          .sshn_list_tree {
            width: 28%;
            height: inherit;
            .list-t {
              font-size: 14px;
              color: #567db6;
              height: 26px;
              display: flex;
              justify-content: flex-end;
              padding-right: 20px;
              align-items: flex-end;
            }
          }
        }
      }
    }
  }

  .box-tit {
    height: 40px;
    line-height: 29px;
    width: 100%;
    font-size: 14px;
    color: #b8f9ff;
    padding-left: 39px;
    background: url("../../../assets/img/box-top.png") no-repeat;
    box-sizing: border-box;
    display: flex;
    .tab {
      width: 100px;
      margin-left: 10px;

      .btn {
        background: #1d2a4f;
        color: #00beff;
        width: 34px;
        display: inline-block;
        height: 20px;
        border-radius: 3px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
      }
      .active {
        background: #567db6 !important;
        color: #fff !important;
      }
    }
  }
  .box-con {
    height: 211px;
    width: 100%;
    padding: 6px 0 6px 10px;
    box-sizing: border-box;
    background: url("../../../assets/img/box-bot.png") no-repeat;
    background-size: 100% 100%;
    .con {
      height: 197px;
      background: rgba(31, 48, 77, 0.2);

      justify-content: space-between;
      .box-con-l {
        width: 50%;
      }
      .box-con-r {
        width: 50%;
      }
    }
    .hn_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          height: 33.333%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .list-l {
            width: 17%;
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
          }
          // .list-c {
          // }
          .list-r {
            width: 52%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              height: 40px;
              span {
                color: #567db6;
                font-size: 25px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 50%;

                &:first-child small {
                  margin-left: 10px;
                  color: #00fbfc;
                }
                &:last-child small {
                  margin-left: 10px;
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .sshn_list_tree {
      width: 28%;
      height: inherit;
      ul {
        height: inherit;
        li {
          height: 64px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 97%;
          background: rgba(31, 48, 77, 0.2);
          &:nth-child(2) {
            margin: 60px 0;
          }
          .list-c {
            padding-left: 21px;
            padding-top: 8px;
          }
          .list-r {
            width: 68%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              span {
                color: #567db6;
                font-size: 22px;
                display: inline-block;
                line-height: 40px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 43%;

                &:first-child small {
                  color: #00fbfc;
                }
                &:last-child small {
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .qx_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          &:first-child {
            height: 25px;
            .list-l {
              width: 23.5%;
              text-align: right;
              display: inline-block;
              color: #567db6;
              font-size: 16px;
            }
            .list-r {
              width: 45%;
              color: #567db6;
              font-size: 14px;
            }
          }
          &:last-child {
            height: 25px;
            font-size: 14px;
            color: #567db6;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          height: 71.333%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .list-l {
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
            width: 50%;
            padding-right: 19px;
          }
          .list-r {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 53%;
            font-size: 49px;
            font-weight: 600;
            color: #567db6;
          }
        }
      }
    }
  }
}

.screen-body {
  width: 100%;
  height: 100%;
  display: flex;

  align-items: center;
  .screen-right {
    height: 100%;
    width: 22.6%;
    margin-left: 50px;
    #left-top {
      height: 24%;
      min-height: 258px;
      margin-bottom: 230px;
      position: relative;
    }
    #left-center {
      height: 35%;
      min-height: 377px;
      position: relative;
      .box-con {
        height: 322px;
        .con {
          height: 306px;
        }
      }
    }
    #left-bottom {
      height: 29%;
      min-height: 323px;
      position: relative;
      z-index: 5;
      .box-con {
        height: 269px;
        .con {
          height: 253px;
        }
      }
    }
  }
  .screen-middle {
    height: 100%;
    width: 80%;
    margin-left: 0.6%;
    margin-right: 0.6%;

    #middle-top {
      width: 100%;
      height: 41.6%;
      position: relative;
      top: 15px;
      left: 0px;

      display: flex;
      flex-direction: column;
      .box-con {
        height: 269px;
        background: url("../../../assets/img/box_center.png") no-repeat;
        background-size: 100% 100%;
        .con {
          height: 253px;
          background: rgba(31, 48, 77, 0.2);
          display: flex;

          align-items: center;
          .sshn-box {
            width: 72%;
            height: inherit;
            position: relative;
            z-index: 666;
            .bjt {
              position: absolute;
              width: 90%;
              height: 100%;
              overflow: hidden;
              display: flex;
              align-items: center;
              background: url("../../../assets/img/bjt.png");
              background-size: 100% 100%;
              top: 15px;
              left: 8%;
              z-index: 1;
            }
          }

          .sshn_list_tree {
            width: 28%;
            height: inherit;
            .list-t {
              font-size: 14px;
              color: #567db6;
              height: 26px;
              display: flex;
              justify-content: flex-end;
              padding-right: 20px;
              align-items: flex-end;
            }
          }
        }
      }
    }
  }

  .box-tit {
    height: 40px;
    line-height: 29px;
    width: 100%;
    font-size: 14px;
    color: #b8f9ff;
    padding-left: 39px;
    background: url("../../../assets/img/box-top.png") no-repeat;
    box-sizing: border-box;
    display: flex;
    .tab {
      width: 100px;
      margin-left: 10px;

      .btn {
        background: #1d2a4f;
        color: #00beff;
        width: 34px;
        display: inline-block;
        height: 20px;
        border-radius: 3px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
      }
      .active {
        background: #567db6 !important;
        color: #fff !important;
      }
    }
  }
  .box-con {
    height: 211px;
    width: 100%;
    padding: 6px 0 6px 10px;
    box-sizing: border-box;
    background: url("../../../assets/img/box-bot.png") no-repeat;
    background-size: 100% 100%;
    .con {
      height: 197px;
      background: rgba(31, 48, 77, 0.2);

      justify-content: space-between;
      .box-con-l {
        width: 50%;
      }
      .box-con-r {
        width: 50%;
      }
    }
    .hn_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          height: 33.333%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .list-l {
            width: 17%;
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
          }
          // .list-c {
          // }
          .list-r {
            width: 52%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              height: 40px;
              span {
                color: #567db6;
                font-size: 25px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 50%;

                &:first-child small {
                  margin-left: 10px;
                  color: #00fbfc;
                }
                &:last-child small {
                  margin-left: 10px;
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .sshn_list_tree {
      width: 28%;
      height: inherit;
      ul {
        height: inherit;
        li {
          height: 64px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 97%;
          background: rgba(31, 48, 77, 0.2);
          &:nth-child(2) {
            margin: 60px 0;
          }
          .list-c {
            padding-left: 21px;
            padding-top: 8px;
          }
          .list-r {
            width: 68%;
            height: 64px;
            display: flex;
            flex-direction: column;
            .num-t {
              color: #b3b3b3;
              font-size: 12px;
              span {
                color: #567db6;
                font-size: 22px;
                display: inline-block;
                line-height: 40px;
              }
            }
            .num-b {
              color: #b3b3b3;
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                color: #b3b3b3;
                font-size: 12px;
                width: 43%;

                &:first-child small {
                  color: #00fbfc;
                }
                &:last-child small {
                  color: #ff4040;
                }
              }
            }
          }
        }
      }
    }

    .qx_list_tree {
      width: 100%;
      height: inherit;
      ul {
        padding: 20px;
        height: inherit;
        li {
          &:first-child {
            height: 25px;
            .list-l {
              width: 23.5%;
              text-align: right;
              display: inline-block;
              color: #567db6;
              font-size: 16px;
            }
            .list-r {
              width: 45%;
              color: #567db6;
              font-size: 14px;
            }
          }
          &:last-child {
            height: 25px;
            font-size: 14px;
            color: #567db6;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          height: 71.333%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .list-l {
            text-align: right;
            display: inline-block;
            color: #567db6;
            font-size: 16px;
            width: 50%;
            padding-right: 19px;
          }
          .list-r {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 53%;
            font-size: 49px;
            font-weight: 600;
            color: #567db6;
          }
        }
      }
    }
  }
}
#left-xxx {
  padding-top: 50px;
}

.screen-body .screen-left #left-top .box-con .con .list-m .list-p {
  padding: 10px;
}
.screen-body .screen-right #left-top .box-con .con .list-m .list-p {
  padding: 10px;
}
#left-bottom .box-con .con .list-m .list-p {
  padding: 15px;
}
.screen-body .screen-zhongjian #left-top .box-con .con .list-m .list-p {
  padding: 30px;
}
.screen-body .screen-zhongjian #left-top .box-con .con .list-m .list-p span {
  padding-left: 27px;
}
#left-xxx .box-con .con .xxxx .list-m .list-p {
  padding: 10px;
}
</style>
